//系统管理 - 角色管理

import React, { Component } from 'react';
import { LocaleProvider, Table, Icon, Tag, Button } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    id: `${i+1}`,
    roleName: '超级管理员',
    roleType: ['超级管理员'],
    dataRange: '全部数据',
    cz: ['编辑权限']
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Rule extends Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <Icon type="appstore" />
            <span className="apply-font">角色列表</span>
            <div className="btn">
              <Button icon="redo" size="small">刷新</Button>
            </div> 
          </div>
          <div className="line"></div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='序号' align='center' dataIndex='id' width='80' />
              <Column title='角色名称' align='center' dataIndex='roleName' width='100' />
              <Column title='系统角色类型' align='center' dataIndex='roleType' width='100' 
                render={roleType => (
                  <span>
                    <Tag color="blue" key={roleType}>{roleType}</Tag>
                  </span>
                )} />
              <Column title='数据范围' align='center' dataIndex='dataRange' width='100' />
              <Column title='操作' align='center' dataIndex='cz' width='100' 
                render={cz => (
                  <span>
                    <Tag color="orange" key={cz}>{cz}</Tag>
                  </span>
                )} />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

export default Rule;